<template>
	<section class="todoapp">

		<Header	@add="addFn"
						:arr="list"
		></Header>


		<Main	:arr="showList"
					@del="delFn"
		></Main>


		<Footer :arr="list"
						@on="onFn"
						@change="changeFn"
		></Footer>

	</section>
</template>

<script>
	// 样式引入 + 导入组件并注册使用
	import Header from './components/TodoHeader.vue'
	import Main from './components/TodoMain.vue'
	import Footer from './components/TodoFooter.vue'

	import './styles/base.css'
	import './styles/index.css'

	export default {
		components: {
			Header,
			Main,
			Footer
		},

		data() {
			return {
				list: JSON.parse(localStorage.getItem("todo25")) || [],

				type: "all"
			};
		},
		methods: {
			delFn(id){
					this.list = this.list.filter(item => item.id !== id)
			},
			addFn(name){
					this.list.unshift({
						id: parseInt(Math.random()*999+1),
						name,
						isDone: false,
					})
			},
			onFn(){
				this.list = this.list.filter(item => item.isDone !== true)
			},
			changeFn(selected){
				console.log(selected);
					this.type = selected
			}
		},

		computed: {
			showList(){
				if(this.type === "active"){
					return this.list.filter(item => item.isDone === false)
				} else if(this.type === "complete"){
					return this.list.filter(item => item.isDone !== false)
				} else {
					return this.list
				}
			}
		},

		watch: {
			list: {
				deep: true,
				handler() {
					localStorage.setItem("todo25", JSON.stringify(this.list))
				}
			}
		}

	};
</script>
